<template>
    <div class="header">
        <a href="#/">
            <img class="logo" src="@/assets/logo.png" width="25px">
            <span class="company">疫情查询系统</span>
        </a>
        <el-dropdown class="el-dropdown" @command="handleCommand">
            <span class="el-dropdown-link">
                admin<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-s-tools" command="a">修改密码</el-dropdown-item>
                <el-dropdown-item icon="el-icon-switch-button" command="b">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>
<script>
import {logout} from "@/api/login"
export default {
    methods: {
        handleCommand(command){
            switch (command) {
                case "a":
                    //修改密码
                    this.$message(`点击了修改密码`);
                    break;
                case "b":
                    //退出系统
                    const token=localStorage.getItem("mxg-msm-token");
                    logout(token).then(response=>{
                        if(response.data.flag){
                            localStorage.removeItem("mxg-msm-token");
                            localStorage.removeItem("mxg-msm-user");
                            this.$router.push("/login");
                        }else{
                            this.$message({
                                message: response.data.message,
                                type: 'warning',
                                duration: 2000
                            });
                        }
                    })

                    break;
                default:
                    break;
            }

        }
    }
}
</script>
<style scoped>
a:-webkit-any-link {
    text-decoration: none;
}
.logo{
    vertical-align: middle;
    padding: 0 10px 0 40px;
}
.company{
    color: #fff;
    position: absolute;
    font-size: 20px;
}
.el-dropdown{
    float: right;
    margin-right: 40px;
}
.el-dropdown-link {
    cursor: pointer;
    color: #fff;
}

</style>
